<template>
  <div class="box">
    <div class="box111">
      <span>
        <input type="text" class="int1" :placeholder="types == ''?'搜索':types" />
      </span>
      <span class="sp2">
        <van-icon name="list-switch" size="2rem" @click="showPopup" />
      </span>
    </div>
    <div class="box1">
      <span style="font-size: 1.2rem">最近搜索</span>
      <span style="float: right; color: rgb(255, 185, 0); margin-top: 0.2rem"
        >6结果</span
      >
    </div>
    <div>
        <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ height: '50%'}"
            style=""
        >
            {{ty}}
            <h4 style="font-size:1.4rem;text-align:center;margin-top:1rem">筛选</h4>
            <h4 style="font-size:1.4rem;margin-left:1rem;margin-top:1rem">分类</h4>
            <p style="margin-top:0.4rem">
                <button v-for="i in type" :key="i" :class="typer == i ?'btn2':'btn1'" @click="typer = i"  >
                    {{i}}
                </button>
            </p>
            <h4 style="font-size:1.4rem;margin-left:1rem;margin-top:2rem">距离</h4>
            <p style="margin-top:1rem">
                <button v-for="i in gl" :key="i" @click="a = i.a,b=i.b" :class=" a == i.a & b == i.b ?'btn2':'btn1'">
                    {{i.a == 0 ?i.b + "公里" :i.a + '-' + i.b + '公里'}}
                </button>
            </p>
            <p style="margin-top:1rem">
                <button class="btn3">重置</button>
                <button class="btn4" @click="gettyper">确认</button>
            </p>
        </van-popup>
    </div>
     
         <div class="box2" v-for="i in list" :key="i" @click="shopfrontinfo(i)">
      <div class="box3">
        <img
          src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8InsvK94GQ2nhzRViLbJWAHaE8?w=278&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt=""
        />
      </div>
      <div class="box4">
        <p style="font-weight: 600; font-size: 16px">{{i.name.slice(0,10) + "..."}}</p>
        <p
          style="margin-top: 0.5rem; font-size: 14px; color: rgb(126, 126, 126)"
        >
          {{i.postton.slice(0,20) + "..."}}
        </p>
        <p style="margin-top:0.7rem">
          <span
            ><van-icon name="location" color="orange" />
            {{ i.gl + '公里' }}</span
          >
          <span style="margin-left: 0.8rem"
            ><van-icon name="star" color="orange" /> {{ i.pj }}</span
          >
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, reactive,onMounted} from 'vue';
import {useRoute,useRouter} from "vue-router"
const route = useRoute()
const router = useRouter()
const types = route.query.type
const shopfrontinfo = (i) => {
  router.push({
    name: 'info',
    query: {
      data:JSON.stringify(i),
    },
  });
};
const list = reactive([
  
]);
const getlist = () => {
  axios
    .get('http://localhost:3000/jsb/gettype?type=' + types)
    .then((res) => {
      list.push(...res.data.list);
      console.log('====================================');
      console.log(list);
      console.log('====================================');
    });
};
const gettyper = ()=>{
  show.value = false
  axios
    .get('http://localhost:3000/jsb/gettyper?type=' + typer.value + '&a=' + a.value + '&b=' + b.value)
    .then((res) => {
      list.length = 0
      list.push(...res.data.list);
      console.log('====================================');
      console.log(list);
      console.log('====================================');
    });
}
onMounted(() => {
  getlist();
});

const type = reactive(["全部","理发","护发","发型设计","染色"])
const gl = reactive([{a:0,b:1},{a:1,b:3},{a:3,b:5},{a:5,b:10}])
const typer = ref("全部")
const a = ref()
const b = ref()
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
</script>

<style lang="scss" scoped>
.int1 {
  width: 13rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 1rem;
  color: black;
  border: 1px solid rgb(212, 212, 212);
  //   margin-left: 1.8rem;
  background: url('/搜索.png') no-repeat left center;
  padding-left: 70px; /* 根据图片大小调整 */
  background-size: 40px; 
  background-position-x:10px;
}
.box111 {
  width: 21rem;
  display: flex;
  margin: 1rem auto;
  .sp2 {
    color: rgb(173, 170, 170);
    margin-left: 1rem;
    margin-top: 0.5rem;
  }
}
.box1 {
  width: 21rem;
  margin: 0 auto;

  overflow: hidden;
  margin-top: 2rem;
}
.box {
  width: 100vw;
  overflow: hidden;
  height: auto;
}
* {
  padding: 0;
  margin: 0;
}
.box2 {
  display: flex;
  width: 21rem;
  height: 7rem;
  margin: 2rem auto;
  justify-content: space-between;
  background-color: white;
}
.box3 {
  width: 30%;
  height: 80%;
  margin-top: 0.7rem;
  margin-left: 0.5rem;
  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}
.box4 {
  width: 60%;
  height: 80%;
  margin-top: 0.7rem;
}
.btn1{
    margin-left: 0.8rem;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 10px;
}
.btn2{
    margin-left: 0.8rem;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 10px;
    background-color: orange;
}
.btn3{
    width: 10rem;
    height: 3rem;
    border-radius: 20px;
    border: 1px solid rgb(255, 185, 0);
    background-color: white;
    color: rgb(255, 185, 0);
    margin-left: 1rem;
  }
  .btn4{
    width: 10rem;
    height: 3rem;
    border-radius: 20px;
    border: none;
    background-color: rgb(255, 185, 0);
    color: white;
    margin-left: 1rem;
  }
</style>